<template>
  <div>
    <v-data-table
      :headers="fileHeaders"
      :items="files"
      hide-actions
      >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.size | formatSize }}</td>
        <td>{{ props.item.speed | formatSize }}</td>
        <td>
          <v-progress-circular
            :size="45"
            :rotate="-90"
            :value="parseFloat(props.item.progress)"
            color="primary"
          >
            {{ props.item.progress }}
          </v-progress-circular>
        </td>
        <td v-if="props.item.error">
          <span class="upload-status">{{ props.item.error }}</span>
          <v-icon>error_outline</v-icon>
        </td>
        <td v-else-if="props.item.success">Success</td>
        <td v-else-if="props.item.active && ! props.item.success">Uploading</td>
        <td v-else-if="props.item.active">Active</td>
        <td v-else>Ready</td>
        <td class="justify-left">
          <v-menu bottom offset-y right open-on-hover>
            <v-btn small color="primary" dark slot="activator">Action</v-btn>
            <v-list>
              <v-list-tile :disabled="props.item.active || props.item.error !== ''" @click.prevent="{}">
                <v-list-tile-action @click.prevent="$refs.upload.update(props.item, {active: true})">Upload</v-list-tile-action>
              </v-list-tile>
              <v-list-tile :disabled="props.item.error === ''" @click.prevent="{}">
                <v-list-tile-action @click.prevent="resumeFile(props.item)">Resume</v-list-tile-action>
              </v-list-tile>
              <v-list-tile :disabled="! props.item.active" @click.prevent="{}">
                <v-list-tile-action @click.prevent="$refs.upload.update(props.item, {error: 'cancel'})">Canel</v-list-tile-action>
              </v-list-tile>
              <v-list-tile :disabled="props.item.active" @click.prevent="{}">
                <v-list-tile-action @click.prevent="$refs.upload.remove(props.item)">Remove</v-list-tile-action>
              </v-list-tile>
            </v-list>
          </v-menu>
        </td>
      </template>
    </v-data-table>
    <v-menu left open-on-hover bottom offset-y>
      <v-btn dark color="primary" slot="activator" @click="selectFiles">
        <VueUploadComponent
          :post-action="postAction"
          :multiple="multiple"
          :size="size"
          :thread="thread"
          :extensions="extensions"
          v-model="files"
          @input-file="inputFile"
          ref="upload">
        </VueUploadComponent>
        <v-icon dark>add</v-icon>Select
      </v-btn>
      <v-list>
        <v-list-tile @click="selectFiles">
          <v-list-tile-title>Add Files</v-list-tile-title>
        </v-list-tile>
        <v-list-tile @click="selectFolder">
          <v-list-tile-title><v-icon light>folder_open</v-icon>Add Folder</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
    <v-btn color="primary" @click.prevent="$refs.upload.active = true"><v-icon light>file_upload</v-icon>Upload</v-btn>
    <v-btn color="primary" @click.prevent="files = []"><v-icon light>remove_circle_outline</v-icon>Remove All</v-btn>
    <v-btn color="primary" @click.prevent="$refs.upload.active = false"><v-icon light>clear</v-icon>Canel All</v-btn>
    <v-btn color="primary" @click.prevent="resumeAllFiles"><v-icon light>undo</v-icon>Resume All</v-btn>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component'
export default {
  name: 'ArticalUpload',
  data () {
    return {
      files: [],
      // accept: 'image/png,image/gif,image/jpeg,image/webp',
      name: 'file',
      postAction: this.$store.state.global.apiBase + '/artical_upload/',
      multiple: true,
      size: 0,
      thread: 3,
      extensions: ['md', 'mp4', 'avi', 'jpg', 'jpeg', 'html', 'png', 'svg'],
      // postAction: 'http://localhost:8000/api/artical_upload/',
      fileHeaders: [
        { text: 'Name', value: 'name', sortable: false, align: 'left' },
        { text: 'Size', value: 'size', sortable: false, align: 'left' },
        { text: 'Speed', value: 'speed', sortable: false, align: 'left' },
        { text: 'Progress', value: 'progress', sortable: false, align: 'left' },
        { text: 'Status', value: 'success', sortable: false, align: 'left' },
        { text: 'Actions', value: 'active', sortable: false, align: 'left' }
      ]
    }
  },
  components: {
    VueUploadComponent
  },
  methods: {
    inputFilter () {},
    inputFile (newFile, oldFile) {
      // @click.prevent="$refs.upload.active = true
      if (newFile && !oldFile) {
        // Add file
      }
      if (newFile && oldFile) {
        // this.$refs.upload.update(newFile, {active: false})
      }
    },
    resumeFile (file) {
      this.$refs.upload.update(file, {error: '', active: false, progress: 0.0, speed: 0})
    },
    resumeAllFiles () {
      const old = this.files.slice()
      this.files = old.map(item => {})
      this.files.map(item => this.$refs.upload.update(item, {error: '', active: false, progress: 0.0, speed: 0}))
    },
    selectFiles () {
      let input = this.$refs.upload.$el.querySelector('input')
      input.click()
    },
    selectFolder () {
      if (!this.$refs.upload.features.directory) {
        this.alert('Your browser does not support')
        return
      }

      let input = this.$refs.upload.$el.querySelector('input')
      input.directory = true
      input.webkitdirectory = true
      this.directory = true

      input.onclick = null
      input.click()
      input.onclick = (e) => {
        this.directory = false
        input.directory = false
        input.webkitdirectory = false
      }
    },
    onEditFileShow (file) {
      this.currentFile = Object.assign({}, file)
      this.fileDialog = true
    },
    onEditClose () {
      this.currentFile = { name: '' }
      this.fileDialog = false
      // $refs.upload.update(file, {active: true})
    },
    onEditSave () {
      console.log(this.currentFile)
      let file = this.currentFile
      this.$refs.upload.update(file, { error: '', file, size: file.size, type: file.type })
      this.currentFile = { name: '' }
      this.fileDialog = false
    }
  },
  computed: {},
  filters: {
    formatSize (size) {
      if (size > 1024 * 1024 * 1024 * 1024) {
        return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
      } else if (size > 1024 * 1024 * 1024) {
        return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
      } else if (size > 1024 * 1024) {
        return (size / 1024 / 1024).toFixed(2) + ' MB'
      } else if (size > 1024) {
        return (size / 1024).toFixed(2) + ' KB'
      }
      return size.toString() + ' B'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
td {
  vertical-align: middle;
}
.upload-status {
  color: red;
}
</style>
